<template>
  <div class="page">
    <div class="page-bg short">
      <div class="page3">
        <div class="page-title">
          工单分布
        </div>
        <div class="page-content">
          <div>
            <div class="echarts">
              <div id="echarts03_1"></div>
            </div>
          </div>
          <div>
            <div class="echarts">
              <div id="echarts03_2"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { echartsConfig } from "@/common/echartsConfig.js";
import requst from "@/api/api";

export default {
  components: {},
  data() {
    return {
      chartData: {},
    };
  },
  async mounted() {
    const {
      data: { data },
    } = await requst.get("/api/1/page/3", {});
    this.chartData = data;

    this.$nextTick(() => {
      this.getEcharts();
    });
  },
  methods: {
    getEcharts() {
      const leftData = this.chartData.aaa;
      const rightData = this.chartData.bbb;

      let params1 = {
        color: [
          new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#FFD993" },
            { offset: 1, color: "#FF7E62" },
          ]),
          new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#4386FF" },
            { offset: 1, color: "#6E5AFF" },
          ]),
        ],
        echartData: leftData,
        id: "echarts03_1",
        number: 1,
      };

      let params2 = {
        color: [
          "#fff",
          new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#7EEFFF" },
            { offset: 1, color: "#4394FF" },
          ]),
          new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#4386FF" },
            { offset: 1, color: "#6E5AFF" },
          ]),
          new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#FFB9FC" },
            { offset: 1, color: "#8E51E1" },
          ]),
        ],
        echartData: rightData,
        id: "echarts03_2",
        number: 2,
      };

      this.echarts01(params1);
      this.echarts01(params2);
    },
    echarts01(echart) {
      let myChart = this.$echarts.init(document.getElementById(echart.id));
      let bgColor = "#081a53";

      let option = {
        series: [
          {
            minAngle: 60,
            type: "pie",
            radius: ["35%", "55%"],
            center: ["50%", "50%"],
            data: echart.echartData,
            hoverAnimation: true,
            itemStyle: {
              normal: {
                borderColor: bgColor,
                borderWidth: 8,
                color: function(params) {
                  return echart.color[params.dataIndex];
                },
              },
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 120,
                lineStyle: {
                  width: 2,
                },
              },
            },
            label: {
              normal: {
                formatter: (params) => {
                  let name = "";
                  if (params.name.length > 5) {
                    // name = params.name.substr(0, 5) + "...";
                    name = params.name;
                  } else {
                    name = params.name;
                  }

                  return (
                    "{value|" + params.value + "单}\n\n{nameColor" + echart.number + params.dataIndex + "|" + name + "}"
                  );
                },
                padding: [0, -100, 0, -100],
                rich: {
                  nameColor10: {
                    fontSize: 30,
                    color: "#FFCB8B",
                  },
                  nameColor11: {
                    fontSize: 30,
                    color: "#55B8FF",
                  },
                  nameColor20: {
                    fontSize: 30,
                    color: "#FFFFFF",
                  },
                  nameColor21: {
                    fontSize: 30,
                    color: "#7DEFFF",
                  },
                  nameColor22: {
                    fontSize: 30,
                    color: "#4495FF",
                  },
                  nameColor23: {
                    fontSize: 30,
                    color: "#EDA8F8",
                  },
                  nameColor24: {
                    fontSize: 30,
                    color: "#FFFFFF",
                  },
                  nameColor24: {
                    fontSize: 30,
                    color: "#7DEFFF",
                  },
                  nameColor25: {
                    fontSize: 30,
                    color: "#EDA8F8",
                  },
                  nameColor26: {
                    fontSize: 30,
                    color: "#4495FF",
                  },
                  nameColor27: {
                    fontSize: 30,
                    color: "#FFCB8B",
                  },
                  nameColor28: {
                    fontSize: 30,
                    color: "#55B8FF",
                  },
                  value: {
                    fontSize: 30,
                    color: "#fff",
                  },
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option, true);
    },
  },
};
</script>
<style lang="scss" scoped>
.page3 {
  .page-content {
    width: 1568rem;
    height: 584rem;
    background-size: 100% 100%;
    margin: 0 auto;
    margin-top: 100rem;
    display: flex;
    flex-wrap: wrap;
    > div {
      background: url("../assets/images/pie-bg1@2x.png") no-repeat;
      width: 752rem;
      height: 584rem;
      background-size: 100% 100%;
      &:nth-child(2) {
        margin-left: 64rem;
      }

      .echarts {
        position: relative;
        width: 753rem;
        height: 585rem;
        #echarts03_1,
        #echarts03_2 {
          width: 753rem;
          height: 585rem;
        }
      }
    }
  }
}
</style>
